<template>
  <div>
    <van-tabbar @change="onChange" route active-color="#ee0a24" inactive-color="#3a3333">
      <van-tabbar-item replace to="/" name="chat" style="text-align: center">
        <van-icon class-prefix="iconfont" name="qipao" class="tabbar-item-icon"/>
        <span>微信</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/contacts" name="contacts" style="text-align: center">
        <van-icon class-prefix="iconfont" name="tongxunlu" class="tabbar-item-icon"/>
        <span>通讯录</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/find" name="find" style="text-align: center" dot>
        <van-icon class-prefix="iconfont" name="find" class="tabbar-item-icon"/>
        <span>发现</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/me" name="me" style="text-align: center">
        <van-icon class-prefix="iconfont" name="me" class="tabbar-item-icon"/>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import { test } from '@/api/home'
  export default {
    name: "TabBar",
    data() {
      return {
        active: "home",
      };
    },
    mounted(){
      test().then(res => {
        console.log(res)
      })
    },
    methods: {
      onChange(index) {
        this.active = index;
      },
    }
  }
</script>

<style scoped>
  /deep/.van-tabbar {
    background-color: #f9f9f9;

  }
  /deep/.van-tabbar-item--active {
    background-color: #f9f9f9;
  }
  /deep/.van-tabbar .van-tabbar-item__icon {
    position: relative;
    margin-bottom: 4px;
    padding-left: 20px;
    font-size: 22px;
  }
  .tabbar-item-icon {
    display: block;
    height: 22px;
    font-size: 22px;
    margin-bottom: 3px;
  }
</style>